<template>
  <div>
    <Table :columns="columns"
           :showPagination="true"
           :dataSource="commentsData"
           :fetch="loadCommentsList"
           :options="commentsOptions"
           @pageNoChange="handlePageNoChange">
      <template #opration="{row}">
        <div class="opration">
          <a href="javascript:void(0)"
             class="a-link"
             @click="del(row)">删除</a>
        </div>
      </template>
    </Table>
  </div>
</template>
  
<script>
import { getCurrentInstance, nextTick } from 'vue';

export default {
    data(){
        return{
            currentPage: 1,
            proxy: getCurrentInstance().proxy,
            columns:[
            {
                label:"文章标题",
                prop:"articleTitle",
                width: 200,
            },
            {
                label:"评论内容",
                prop:"content",
            },
            {
                label:"评论时间",
                prop:"created",
                width:300,
            },
            {
                label:"操作",
                prop:"opration",
                width: 150,
                scopedSlots: "opration"
            }],
            commentsData:{
              list:[]
            },
            commentsOptions: {
              border:true,
              extHeight: 10
            },
        };
    },
    methods: {
      //加载数据
      async loadCommentsList(){
        try {
          let params = {};
          Object.assign(params, this.currentPage);
          let result = await this.proxy.Request({
            url: "comments/all",
            method: "GET",
            params
          });

          if (!result){
            return;
          }
          this.commentsData.list = result.data.rows;
        } catch(error){
          console.error("获取评论数据时出错：",error)
        }
      },

      //删除评论
      del(data) {
        console.log("test")
        this.proxy.Confirm('你确定要删除该评论吗?', async() => {
          let result = await this.proxy.Request({
            url: '/comments/'+data.id,
            method: "DELETE",
            params: {
              id: data.id,
            }
          })
          if (!result) {
            return;
          }
          this.loadCommentsList();
        })
      },

      handlePageNoChange(pageNo) {
          console.log('?page=',pageNo);
          this.currentPage = pageNo;
          console.log('?pageNow=',this.currentPage);
          const url = 'comments/?page='+this.currentPage;
          console.log(url);
      },
      
    },
    mounted(){
      this.loadCommentsList();
    },
}
</script>

<style>

</style>